<template>
	<view class="jyq">
		<view class="banner">
			<image class="banner_img" :src="banner" mode="widthFix" @click="previewBanner"></image>
		</view>
		<view class="cu-card dynamic">
			<view class="cu-item shadow">


				<view class="cu-list menu-avatar comment solids-top">
					<view class="cu-item mb30" v-for="(item,index) in jyqList" :key="index" @click="copyItem(item)">
						<image class="cu-avatar round" :src="item.user.headimg" mode="aspectFill"></image>

						<view class="content">
							<view class="text-grey flex justify-between">
								<text>{{item.user.user_name}}</text>
								<text class="text-size-sm margin-left-sm fs24">提示：点击复制</text>
							</view>
							<view class="text-gray text-content text-df">
								{{item.content}}
							</view>

							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">{{item.time}}</view>
								<view>

									<text class="cuIcon-copy text-gray"></text>
									<text class="text-gray">{{item.copy_counts}}</text>

								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="text-center text-gray" @click="loadData">{{hasMOreStr}}</view>


			</view>
		</view>

		<view class="add" @click="toAdd">
			<text class="cuIcon-add"></text>
		</view>
		<version></version>
	</view>
</template>

<script>
	import {
		setClipboardData,
		getClipboardData
	} from 'uni-clipboard';
	let that;
	export default {
		data() {
			return {
				banner: "../../static/images/banner1.jpg",
				isCard: false,
				jyqList: [{
						user: {
							headimg: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
							name: '凯尔1'
						},
						info: "妹妹，如果不是为了飞翔，我们要这翅膀有什么用?",
						time: "2020-12-12 18:44"
					},
					{
						user: {
							headimg: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
							name: '凯尔2'
						},
						info: "如果不能立足于大地，要这双脚又有何用?",
						time: "2020-12-12 18:43"
					}
				],
				page: 0,
				pageSize: 10,
				hasMore: 1,
				hasMOreStr: "滚动加载更多"
			};
		},
		onLoad() {
			that = this;
			this.search();
		},
		onPullDownRefresh() {
			this.search();
		},
		onReachBottom() {
			//this.search();
			this.loadData();
		},
		methods: {
			previewBanner() {
				let imgs=[this.banner];
				uni.previewImage({
					urls: imgs,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			toAdd() {
				uni.navigateTo({
					url: "./add"
				});
			},
			search() {
				this.jyqList = [];
				this.page = 0;
				this.setHasMore();
				this.loadData();
			},
			async loadData() {
				if (this.hasMore == 0) {
					console.log("内容加载完了");
					return; //没有了
				}
				this.hasMOreStr = "努力加载中……";
				this.page > 0 ? this.page++ : this.page = 1;
				let url = "/jingyouquan/getList";
				let params = {
					page: this.page,
					pageSize: this.pageSize,
					keyword: ""
				};
				let [err, response] = await this.$to(this.$request(url, params));
				uni.stopPullDownRefresh();
				if (err) {
					return;
				}
				let last_page = response.data.last_page;
				response.data.data.forEach(function(item, index) {
					that.jyqList.push(item);
				});
				if (this.page < last_page) {
					//this.page++;
					this.setHasMore();
				} else {
					this.setNoMore();
				}
			},
			setHasMore() {
				this.hasMore = 1;
				this.hasMOreStr = "点击加载更多";
			},
			setNoMore() {
				this.hasMore = 0;
				this.hasMOreStr = "我是有底线的";
			},
			async copyItem(item) {
				console.log("this", this);
				let str = item.content;
				let [fail, success] = await this.$to(setClipboardData(str));
				// [err,response]=await  this.$to(this.$request("",{}));
				console.log("复制内容：", str, fail, success);
				uni.showToast({
					title: "京口令复制成功",
					icon: "none"
				});
				let url = "/jingyouquan/addCopyCounts";
				let params = {
					id: item.id
				};
				item.copy_counts++;
				let [error, response] = await this.$to(this.$request(url, params, 0));
				console.log("提交结果", error, response);
			}
		}
	}
</script>

<style lang="scss">
	//透明补丁
	.cu-card.dynamic>.cu-item {
		background-color: transparent;

	}

	.jyq {
		position: relative;

		.banner {
			.banner_img {
				width: 100%;
			}
		}

		.add {
			position: fixed;
			width: 80rpx;
			height: 80rpx;
			font-size: 60rpx;
			line-height: 76rpx;
			background-color: #A5673F;
			border-radius: 50%;
			right: 40rpx;
			bottom: 40rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>
